<template>
  <div class="tourist-home">
    <!-- 轮播图区域 -->
    <div class="banner-section">
      <el-carousel height="400px" :interval="4000">
        <el-carousel-item
          v-for="item in bannerList"
          :key="item.id"
          @click="handleBannerClick(item.id)"
        >
          <div class="banner-container">
            <div
              class="banner-item"
              :style="{
                backgroundImage: item.avatar
                  ? `url(${item.avatar})`
                  : 'linear-gradient(120deg, #e0f2f1 0%, #80cbc4 100%)',
              }"
            >
              <div class="banner-content">
                <h2 class="banner-title">{{ item.name }}</h2>
                <p class="banner-desc">{{ item.description }}</p>
                <div class="banner-meta">
                  <span class="price">¥{{ item.price }}</span>
                  <span class="rating">
                    <el-rate
                      v-model="item.rating"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 农技知识区域 -->
    <div class="section knowledge-section">
      <div class="section-header">
        <h2 class="section-title">
          <el-icon><ChatDotRound /></el-icon>
          智能体AI
        </h2>
      </div>
      <div class="section-content">
        <div class="ai-assistant-card">
          <div class="ai-header">
            <el-avatar :size="60" :src="aiAvatar" />
            <h3>智能助手</h3>
          </div>
          <div class="ai-features">
            <div class="feature-item">
              <el-icon><Reading /></el-icon>
              <span>农技知识咨询</span>
            </div>
            <div class="feature-item">
              <el-icon><Location /></el-icon>
              <span>旅游景点推荐</span>
            </div>
            <div class="feature-item">
              <el-icon><Apple /></el-icon>
              <span>特产购买指南</span>
            </div>
          </div>
          <div class="ai-action">
            <el-button
              type="primary"
              size="large"
              @click="router.push('/tourist/ai-chat')"
            >
              <el-icon><ChatDotRound /></el-icon>
              立即咨询
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 特色农产品区域 -->
    <div class="section products-section">
      <div class="section-header">
        <h2 class="section-title">
          <el-icon><Apple /></el-icon>
          特色农产品
        </h2>
        <div class="header-right">
          <el-button-group class="scroll-buttons">
            <el-button
              @click="scrollLeftProducts"
              :disabled="isProductsScrollStart"
              text
            >
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <el-button
              @click="scrollRightProducts"
              :disabled="isProductsScrollEnd"
              text
            >
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </el-button-group>
          <el-button
            type="primary"
            link
            @click="router.push('/tourist/products')"
          >
            查看更多 <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </div>

      <div class="section-content">
        <el-scrollbar ref="productsScrollbarRef" horizontal>
          <div class="products-container">
            <div
              v-for="product in products"
              :key="product.id"
              class="product-item"
              @click="router.push(`/tourist/products/${product.id}`)"
            >
              <el-card :body-style="{ padding: '0px' }">
                <el-image
                  :src="product.avatar"
                  class="product-image"
                  fit="cover"
                >
                  <template #error>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div class="product-info">
                  <el-tag
                    class="product-type"
                    :type="
                      product.productType === 1
                        ? 'success'
                        : product.productType === 2
                        ? 'warning'
                        : 'info'
                    "
                    size="small"
                  >
                    {{
                      product.productType === 1
                        ? "果蔬"
                        : product.productType === 2
                        ? "肉类"
                        : "水产"
                    }}
                  </el-tag>
                  <h3 class="product-name">{{ product.name }}</h3>
                  <p class="product-desc">{{ product.description }}</p>
                  <div class="product-meta">
                    <span class="price">¥{{ product.price.toFixed(2) }}</span>
                    <span class="sales">已售 {{ product.salesVolume }}</span>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <!-- 乡村旅游区域 -->
    <div class="section tourism-section">
      <div class="section-header">
        <h2 class="section-title">
          <el-icon><Location /></el-icon>
          乡村旅游
        </h2>
        <div class="header-right">
          <el-button-group class="scroll-buttons">
            <el-button @click="scrollLeft" :disabled="isScrollStart" text>
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <el-button @click="scrollRight" :disabled="isScrollEnd" text>
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </el-button-group>
          <el-button
            type="primary"
            link
            @click="router.push('/tourist/tourism')"
          >
            查看更多 <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </div>

      <div class="section-content">
        <el-scrollbar ref="scrollbarRef">
          <div class="attractions-container">
            <div
              v-for="attraction in attractions"
              :key="attraction.id"
              class="attraction-item"
              @click="router.push(`/tourist/attraction/${attraction.id}`)"
            >
              <el-card :body-style="{ padding: '0px' }">
                <el-image
                  :src="attraction.avatar"
                  class="attraction-image"
                  fit="cover"
                >
                  <template #error>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div class="attraction-info">
                  <div class="attraction-type">
                    <el-tag
                      :type="
                        attraction.type === 1
                          ? 'success'
                          : attraction.type === 2
                          ? 'warning'
                          : 'info'
                      "
                      size="small"
                    >
                      {{ getTypeTag(attraction.type) }}
                    </el-tag>
                  </div>
                  <h3 class="attraction-name">{{ attraction.name }}</h3>
                  <p class="attraction-desc">{{ attraction.description }}</p>
                  <div class="attraction-meta">
                    <span class="price">¥{{ attraction.price }}</span>
                    <div class="rating">
                      <el-rate
                        v-model="attraction.rating"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}"
                      />
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  ArrowLeft,
  ArrowRight,
  Picture,
  Apple, // 农产品图标
  Location, // 旅游图标
  ChatDotRound,
  Reading, // 添加 Reading 图标
} from "@element-plus/icons-vue";
import type { ElScrollbar } from "element-plus";
import request from "@/utils/request";

interface BannerItem {
  id: number;
  name: string;
  description: string;
  price: number;
  rating: number;
  avatar: string | null;
}

interface Product {
  id: number;
  name: string;
  description: string;
  avatar: string;
  price: number;
  salesVolume: number;
  productType: number;
}

interface Attraction {
  id: number;
  name: string;
  description: string;
  price: number;
  type: number;
  rating: number;
  avatar: string | null;
}

const bannerList = ref<BannerItem[]>([]);
const router = useRouter();
const products = ref<Product[]>([]);
const attractions = ref<Attraction[]>([]);
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
const isScrollStart = ref(true);
const isScrollEnd = ref(false);
const productsScrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
const isProductsScrollStart = ref(true);
const isProductsScrollEnd = ref(false);
const aiAvatar = ref("/images/ai-avatar.jpg");

// 获取轮播图数据
const fetchBannerData = async () => {
  try {
    const res = await request({
      url: "/touristAttractions/banner",
      method: "get",
    });

    if (res.success) {
      bannerList.value = res.data;
    }
  } catch (error) {
    console.error("获取轮播图数据失败：", error);
  }
};

// 获取首页农产品数据
const fetchHomeProducts = async () => {
  try {
    const res = await request({
      url: "/agriculturalProduct/showHome",
      method: "get",
    });

    if (res.success) {
      products.value = res.data;
    }
  } catch (error) {
    console.error("获取农产品数据失败：", error);
  }
};

// 获取首页景点数据
const fetchHomeAttractions = async () => {
  try {
    const res = await request({
      url: "/touristAttractions/showHome",
      method: "get",
    });

    if (res.success) {
      attractions.value = res.data;
    }
  } catch (error) {
    console.error("获取景点数据失败：", error);
  }
};

// 获取景点类型标签
const getTypeTag = (type: number) => {
  switch (type) {
    case 1:
      return "自然风光";
    case 2:
      return "人文景观";
    case 3:
      return "农事体验";
    default:
      return "其他";
  }
};

// 点击轮播图跳转到详情
const handleBannerClick = (id: number) => {
  router.push(`/tourist/attraction/${id}`);
};

// 滚动控制
const scrollLeft = () => {
  if (scrollbarRef.value) {
    const wrap = scrollbarRef.value.wrapRef;
    if (wrap) {
      wrap.scrollLeft -= 300;
    }
  }
};

const scrollRight = () => {
  if (scrollbarRef.value) {
    const wrap = scrollbarRef.value.wrapRef;
    if (wrap) {
      wrap.scrollLeft += 300;
    }
  }
};

// 监听滚动位置
const handleScroll = (e: Event) => {
  const target = e.target as HTMLElement;
  isScrollStart.value = target.scrollLeft <= 0;
  isScrollEnd.value =
    target.scrollLeft + target.clientWidth >= target.scrollWidth;
};

// 农产品区域滚动控制
const scrollLeftProducts = () => {
  if (productsScrollbarRef.value) {
    const wrap = productsScrollbarRef.value.wrapRef;
    if (wrap) {
      wrap.scrollLeft -= 300;
    }
  }
};

const scrollRightProducts = () => {
  if (productsScrollbarRef.value) {
    const wrap = productsScrollbarRef.value.wrapRef;
    if (wrap) {
      wrap.scrollLeft += 300;
    }
  }
};

// 监听农产品区域滚动位置
const handleProductsScroll = (e: Event) => {
  const target = e.target as HTMLElement;
  isProductsScrollStart.value = target.scrollLeft <= 0;
  isProductsScrollEnd.value =
    target.scrollLeft + target.clientWidth >= target.scrollWidth;
};

onMounted(() => {
  fetchBannerData();
  fetchHomeProducts();
  fetchHomeAttractions();
  if (scrollbarRef.value?.wrapRef) {
    scrollbarRef.value.wrapRef.addEventListener("scroll", handleScroll);
  }
  if (productsScrollbarRef.value?.wrapRef) {
    productsScrollbarRef.value.wrapRef.addEventListener(
      "scroll",
      handleProductsScroll
    );
  }
});
</script>

<style lang="scss" scoped>
.tourist-home {
  .banner-section {
    margin: -20px -20px 20px;

    .banner-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      background: #f5f7fa;
    }

    .banner-item {
      width: 1200px; // 限制最大宽度
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50%;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.7) 0%,
          rgba(0, 0, 0, 0) 100%
        );
      }
    }

    .banner-content {
      position: absolute;
      left: 50px;
      bottom: 50px;
      right: 50px;
      color: #fff;
      z-index: 1;
    }

    .banner-title {
      font-size: 32px;
      margin: 0 0 10px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .banner-desc {
      font-size: 16px;
      margin: 0 0 20px;
      opacity: 0.9;
      max-width: 600px;
      line-height: 1.5;
    }

    .banner-meta {
      display: flex;
      align-items: center;
      gap: 30px;

      .price {
        font-size: 24px;
        font-weight: bold;
        color: #ff9900;
      }

      .rating {
        display: flex;
        align-items: center;
      }
    }
  }

  .section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .section-title {
      margin: 0;
      font-size: 20px;
      color: #333;
      border-left: 4px solid #4caf50;
      padding-left: 10px;
      display: flex;
      align-items: center;
      gap: 8px;

      .el-icon {
        font-size: 24px;
        color: #4caf50;
      }
    }

    .section-content {
      min-height: 200px;
    }

    .product-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }

    .product-image {
      width: 100%;
      height: 200px;
    }

    .product-info {
      padding: 14px;
      position: relative;
    }

    .product-name {
      margin: 0;
      font-size: 16px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-desc {
      margin: 8px 0;
      font-size: 14px;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      min-height: 40px;
    }

    .product-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;

      .price {
        color: #ff6b6b;
        font-size: 18px;
        font-weight: bold;
      }

      .sales {
        color: #999;
        font-size: 12px;
      }
    }

    .product-type {
      position: absolute;
      top: 14px;
      right: 14px;
    }

    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      color: #909399;
      font-size: 30px;
    }
  }

  // 添加特色农产品区域的样式
  .products-section {
    .section-header {
      .header-right {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .scroll-buttons {
        .el-button {
          padding: 8px 12px;

          &:disabled {
            color: #c0c4cc;
          }
        }
      }
    }

    .products-container {
      display: flex;
      gap: 20px;
      padding: 10px;
      padding-bottom: 5px;
    }

    .product-item {
      flex: 0 0 300px; // 关键样式：固定宽度并禁止缩放
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

:deep(.el-carousel__item) {
  display: flex;
  justify-content: center;
  background: #f5f7fa;
}

:deep(.el-rate) {
  display: inline-flex;
  .el-rate__text {
    color: #fff;
  }
}

// 响应式布局
@media screen and (max-width: 1200px) {
  .section .product-image {
    height: 180px;
  }
}

@media screen and (max-width: 768px) {
  .section .product-image {
    height: 160px;
  }
}

.tourism-section {
  .section-header {
    .header-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .scroll-buttons {
      .el-button {
        padding: 8px 12px;

        &:disabled {
          color: #c0c4cc;
        }
      }
    }
  }

  .attractions-container {
    display: flex;
    gap: 20px;
    padding: 10px;
    padding-bottom: 5px; // 留出滚动条的空间
  }

  .attraction-item {
    flex: 0 0 300px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  .attraction-image {
    width: 100%;
    height: 200px;
  }

  .attraction-info {
    padding: 14px;
    position: relative;
  }

  .attraction-type {
    position: absolute;
    top: -22px;
    right: 14px;
    z-index: 1;
  }

  .attraction-name {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .attraction-desc {
    margin: 8px 0;
    font-size: 14px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 40px;
  }

  .attraction-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;

    .price {
      color: #ff6b6b;
      font-size: 18px;
      font-weight: bold;
    }

    .rating {
      :deep(.el-rate__text) {
        color: #ff9900;
      }
    }
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
  }

  // 添加滚动过渡效果
  :deep(.el-scrollbar__wrap) {
    scroll-behavior: smooth;
  }
}

:deep(.el-scrollbar__bar.is-horizontal) {
  opacity: 1;
}

.knowledge-section {
  .section-content {
    padding: 20px;
  }

  .ai-assistant-card {
    background: linear-gradient(135deg, #e3f2fd 0%, #90caf9 100%);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      z-index: 1;
    }

    .ai-header {
      margin-bottom: 32px;
      position: relative;
      z-index: 2;

      .el-avatar {
        width: 80px;
        height: 80px;
        margin-bottom: 16px;
        border: 4px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }

      h3 {
        margin: 12px 0 0;
        font-size: 24px;
        color: #1565c0;
        font-weight: 600;
      }
    }

    .ai-features {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin-bottom: 32px;
      position: relative;
      z-index: 2;

      .feature-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }

        .el-icon {
          font-size: 32px;
          color: #1565c0;
          background: rgba(255, 255, 255, 0.9);
          padding: 12px;
          border-radius: 12px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        span {
          font-size: 15px;
          color: #1565c0;
          font-weight: 500;
        }
      }
    }

    .ai-action {
      position: relative;
      z-index: 2;

      .el-button {
        padding: 12px 40px;
        font-size: 16px;
        font-weight: 500;
        background: #1565c0;
        border: none;
        box-shadow: 0 4px 16px rgba(21, 101, 192, 0.3);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(21, 101, 192, 0.4);
          background: #1976d2;
        }

        .el-icon {
          margin-right: 8px;
          font-size: 20px;
        }
      }
    }
  }
}
</style> 